import React, { Component } from 'react'
import { Switch ,Route,NavLink} from "react-router-dom"

import home_y from "../../assets/img/home_y.jpeg"
import home_n from "../../assets/img/home_n.jpeg"
import cate_y from "../../assets/img/cate_y.jpeg"
import cate_n from "../../assets/img/cate_n.jpeg"
import shop_y from "../../assets/img/shop_y.jpeg"
import shop_n from "../../assets/img/shop_n.jpeg"
import mine_y from "../../assets/img/mine_y.jpeg"
import mine_n from "../../assets/img/mine_n.jpeg"

import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'
import "./Index.less"

export default class Index extends Component {
    render() {
        let { location:{pathname}} = this.props;
        return (
            <div className="index">
                {/* 二级路由 */}
                <Switch>
                    <Route path="/index/home" component={Home}></Route>
                    <Route path="/index/cate" component={Cate}></Route>
                    <Route path="/index/shop" component={Shop}></Route>
                    <Route path="/index/mine" component={Mine}></Route>
                </Switch>

                {/* 底部导航 */}
                <footer className="footer">
                    <NavLink activeClassName="active" to="/index/home">
                        <img src={pathname==="/index/home"?home_y:home_n} alt="" />
                        <div>首页</div>
                    </NavLink>
                    <NavLink activeClassName="active" to="/index/cate">
                        <img src={pathname==="/index/cate"?cate_y:cate_n} alt="" />
                        <div>分类</div>
                    </NavLink>
                    <NavLink activeClassName="active" to="/index/shop">
                        <img src={pathname==="/index/shop"?shop_y:shop_n} alt="" />
                        <div>购物车</div>
                    </NavLink>
                    <NavLink activeClassName="active" to="/index/mine">
                        <img src={pathname==="/index/mine"?mine_y:mine_n} alt="" />
                        <div>我的</div>
                    </NavLink>
                </footer>
            </div>
        )
    }
}
